<template>
  <div class="dissolveOrganization">
    <div class="step_box">
      <el-steps class="step" :active="currStep" align-center>
        <el-step v-for="(item, index) in steps" :key="index" :title="item.title" />
      </el-steps>
    </div>
    <div class="step_content">
      <div v-show="currStep === 1">
        <p class="title_box">{{ $t('institutionSetting.jigou89') }}</p>

        <p>
          <span class="dot"></span>
          <span>{{ $t('institutionSetting.jigou90') }}</span>
          <span class="stress_text">{{ $t('institutionSetting.jigou91') }}</span>
        </p>
        <p>
          <span class="dot"></span>
          <span>{{ $t('institutionSetting.jigou92') }}</span>
        </p>
        <p>
          <span class="dot"></span>
          <span>{{ $t('institutionSetting.jigou93') }}</span>
        </p>
        <div class="checkbox_box">
          <el-checkbox v-model="know">{{ $t('institutionSetting.jigou94') }}</el-checkbox>
        </div>
      </div>

      <sendCode ref="sendCode" v-show="currStep === 2"></sendCode>

      <div v-show="currStep === 3">
        <p class="improve_title">{{ $t('institutionSetting.jigou96') }}</p>
        <div class="checkbox_group_box">
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              v-for="(item, index) in improveList"
              :key="index"
              :label="item.label"
            ></el-checkbox>
          </el-checkbox-group>
        </div>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          :placeholder="$t('institutionSetting.jigou101')"
          maxlength="100"
          show-word-limit
          v-model="reasons"
        >
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import sendCode from '@/components/sendCode/index';
export default {
  name: 'dissolveOrganization',

  data() {
    return {
      // 记录当前国际化
      lang: this.$i18n.locale,
      // 当前选中步骤
      currStep: 1,
      // 转让步骤条数据
      steps: [
        {
          title: this.$t('institutionSetting.jigou86'),
        },
        {
          title: this.$t('institutionSetting.jigou87'),
        },
        {
          title: this.$t('institutionSetting.jigou88'),
        },
      ],
      // 第一个步骤中的是否知道
      know: false,
      // 第三个步骤中的改进产品复选框
      improveList: [
        {
          label: this.$t('institutionSetting.jigou97'),
          value: '1',
        },
        {
          label: this.$t('institutionSetting.jigou98'),
          value: '2',
        },
        {
          label: this.$t('institutionSetting.jigou99'),
          value: '3',
        },
        {
          label: this.$t('institutionSetting.jigou100'),
          value: '4',
        },
      ],
      checkList: [],
      reasons: '',
    };
  },
  components: {
    sendCode,
  },

  props: {},
  created() {},
  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.dissolveOrganization {
  padding: 10px;

  .step_content {
    margin-top: 20px;

    .title_box {
      margin-bottom: 8px;
    }

    .dot {
      display: inline-block;
      width: 4px;
      height: 4px;
      background: black;
      border-radius: 50%;
      margin-right: 6px;
      position: relative;
      top: -3px;
    }

    .stress_text {
      color: red;
    }

    p {
      line-height: 30px;
    }

    .checkbox_box {
      margin-top: 20px;
    }

   
    .el-checkbox {
      line-height: 40px;
    }
    .improve_title {
      margin-bottom: 10px;
    }
    .checkbox_group_box {
      margin-bottom: 20px;
    }
  }
}
</style>